<template>
  <crud
    :entity-name="entityName"
    :keyword-placeholder="L('UserName')+'/'+L('Name')"
    :request-param="pagerequest"
    :dialog-enity.sync="entity"
    :dialog-optins="dialogOptins"
    @dialogFormClearValidate="handleFormClearValidate"
    @dialogFormValidate="handleFormValidate"
  >
    <template slot="FilterItems">
      <el-select
        v-model="activeSelected"
        size="small"
        :placeholder="L('Select')"
        clearable
        style="width: 90px"
        class="filter-item"
        @change="handleIsActiveChange"
      >
        <el-option
          :label="L('All')"
          value="All"
        />
        <el-option
          :label="L('Actived')"
          value="Actived"
        />
        <el-option
          :label="L('NoActive')"
          value="NoActive"
        />
      </el-select>
      <el-date-picker
        v-model="creationTime"
        size="small"
        class="filter-item"
        type="daterange"
        align="right"
        unlink-panels
        start-placeholder="创建开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="handleCreationTimeChange"
      />
    </template>

    <template slot="TableColumns">
      <el-table-column
        prop="userName"
        :label="L('UserName')"
        width="180"
      />
      <el-table-column
        prop="emailAddress"
        :label="L('EmailAddress')"
      />
      <el-table-column :label="L('IsActive')">
        <template slot-scope="{row}">
          <el-tag :type="row.isActive | booleanTagFilter">
            {{ row.isActive ? L('Yes') : L('No') }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        sortable="custom"
        prop="creationTime"
        :label="L('CreationTime')"
      >
        <template slot-scope="{row}">
          <span>{{ row.creationTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
    </template>

    <create-or-edit-user
      slot="CreateOrEditDialog"
      ref="CreateOrEditDialog"
      slot-scope="{dialogAction}"
      :dialog-action="dialogAction"
      :entity="entity"
    />

  </crud>
</template>

<script>
import crud from '@/components/CRUD'
import { parseTime } from '@/utils'
import createOrEditUser from './components/CreateOrEditUser'

export default {
  name: 'Users',
  components: { crud, 'create-or-edit-user': createOrEditUser },
  data() {
    return {
      entityName: 'user',
      entity: {},
      pagerequest: {
        isActive: null,
        from: null,
        to: null
      },
      dialogOptins: {
        width: '500px',
        createEnityParam: { isActive: true, roleNames: [], memberedOrganizationUnits: [] },
        createTitle: this.L('CreateNewUser'),
        editTitle: this.L('EditUser'),
        deleteConfirm: this.L('DeleteUserConfirm')
      },

      activeSelected: null,
      creationTime: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  async created() {
    await this.$store.dispatch({
      type: 'user/getRoles'
    })
    await this.$store.dispatch({
      type: 'user/getOrganizationUnits'
    })
  },
  methods: {
    handleIsActiveChange(val) {
      if (val === 'Actived') {
        this.pagerequest.isActive = true
      } else if (val === 'NoActive') {
        this.pagerequest.isActive = false
      } else {
        this.pagerequest.isActive = null
      }
    },
    handleCreationTimeChange(val) {
      if (val === null) {
        this.pagerequest.from = null
        this.pagerequest.to = null
        return
      }
      if (val.length > 0) {
        this.pagerequest.from = parseTime(val[0], '{y}-{m}-{d}')
      }
      if (val.length > 1) {
        this.pagerequest.to = parseTime(val[1], '{y}-{m}-{d}')
      }
    },

    handleFormClearValidate() {
      this.$refs.CreateOrEditDialog.clearValidate()
    },
    handleFormValidate(cb) {
      this.$refs.CreateOrEditDialog.validate(cb)
    }
  }
}
</script>

